import React, { Component } from "react";
import { StyleSheet, Text, View, Button, ScrollView, TouchableOpacity } from "react-native";
import actions from "../action";
import Ionicons from 'react-native-vector-icons/Ionicons'
import { connect } from "react-redux";
import NavigationBar from 'react-native-navbar-plus';
import { MORE_MENU } from "../common/MORE_MENU";
import GlobalStyles from "../res/GlobalStyles";
import ViewUtil from "../util/ViewUtil";
import { FLAG_LANGUAGE } from "../expand/dao/LanguageDao";
import NavigationUtil from "../navigator/NavigationUtil";

class MyPage extends Component {

    onClick(menu) {
        const { theme } = this.props
        let RouteName, params = {}
        params.theme = theme
        switch (menu) {
            case MORE_MENU.Tutorial:
                RouteName = 'WebViewPage'
                params.title = '教程'
                params.url = 'https://coding.m.imooc.com/classindex.html?cid=89'
                break;
            case MORE_MENU.Custom_Key:
            case MORE_MENU.Custom_Language:
            case MORE_MENU.Remove_Key:
                RouteName = 'CustomKeyPage';
                RouteName = 'CustomKeyPage';
                params.isRemoveKey = menu === MORE_MENU.Remove_Key;
                params.flag = menu !== MORE_MENU.Custom_Language ? FLAG_LANGUAGE.flag_key : FLAG_LANGUAGE.flag_language;

                break;
            case MORE_MENU.About:
                RouteName = 'AboutPage'
                break;
            case MORE_MENU.Custom_Theme:
                const { onShowCustomThemeView } = this.props;
                onShowCustomThemeView(true);

                break;
            case MORE_MENU.About_Author:
                RouteName = 'AboutMePage'
                break;
            case MORE_MENU.CodePush:
                RouteName = 'CodePushPage';
                break;
            default:
                break;
        }
        if (RouteName) {
            NavigationUtil.goPage(params, RouteName)
        }
    }

    getItem(menu) {
        const { theme: { themeColor } = {} } = this.props;
        return ViewUtil.getMenuItem(() =>
            this.onClick(menu)
            , menu, themeColor)
    }
    render() {
        const { theme: { themeColor } = {}, theme } = this.props;
        console.log('xxxxxx')
        let statusBar = {
            backgroundColor: themeColor,
            barStyle: 'light-content',
        };
        let navigationBar =
            <NavigationBar
                title={'我的'}
                statusBar={statusBar}
                style={theme.styles.navBar}
            />;
        return (
            <View style={GlobalStyles.root_container}>
                {navigationBar}
                <ScrollView>
                    <TouchableOpacity
                        onPress={() => this.onClick(MORE_MENU.About)}
                        style={styles.item}
                    >
                        <View style={styles.about_left}>
                            <Ionicons
                                name={MORE_MENU.About.icon}
                                size={40}
                                style={{
                                    marginRight: 40,
                                    color: themeColor
                                }}
                            />
                            <Text>GitHub Popular</Text>
                        </View>
                        <Ionicons
                            name={'ios-arrow-forward'}
                            size={16}
                            style={{
                                marginRight: 10,
                                alignSelf: 'center',
                                color: themeColor
                            }}
                        />
                    </TouchableOpacity>
                    <View style={GlobalStyles.line} />
                    {this.getItem(MORE_MENU.Tutorial)}

                    <Text style={styles.groupTitle}>趋势管理</Text>
                    {/* 自定义语言 */}
                    {this.getItem(MORE_MENU.Custom_Language)}
                    <View style={GlobalStyles.line} />
                    {/* 语言排序 */}
                    {this.getItem(MORE_MENU.Sort_Language)}

                    <Text style={styles.groupTitle}>最热管理</Text>
                    {/* 自定义标签 */}
                    {this.getItem(MORE_MENU.Custom_Key)}
                    <View style={GlobalStyles.line} />
                    {/* 标签排序 */}
                    {this.getItem(MORE_MENU.Sort_Key)}
                    <View style={GlobalStyles.line} />
                    {/* 标签移除 */}
                    {this.getItem(MORE_MENU.Remove_Key)}

                    <Text style={styles.groupTitle}>设置</Text>
                    {/* 自定义主题 */}
                    {this.getItem(MORE_MENU.Custom_Theme)}
                    <View style={GlobalStyles.line} />
                    {/* 关于作者 */}
                    {this.getItem(MORE_MENU.About_Author)}
                    <View style={GlobalStyles.line} />
                    {/* 反馈 */}
                    {this.getItem(MORE_MENU.Feedback)}
                    {/* RN热跟新 */}
                    <View style={GlobalStyles.line} />
                    {this.getItem(MORE_MENU.CodePush)}
                </ScrollView>
            </View>
        )
    }
}
// 将dispatch 映射给onThemeCHange,然后注入到组件的props中

// const mapDispatchToProps = (dispatch) => ({
//     onThemeChange: (theme) => dispatch(actions.onThemeChange(theme))
// })

// 映射redux状态中的props
const mapStateToProps = (state) => ({
    theme: state.theme.theme
})

// 包装component,注入dispatch刀MyPage
const mapDispatchToProps = dispatch => ({
    onShowCustomThemeView: (show) => dispatch(actions.onShowCustomThemeView(show)),
});
export default connect(mapStateToProps, mapDispatchToProps)(MyPage)
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    about_left: {
        alignItems: 'center',
        flexDirection: 'row'
    },
    item: {
        backgroundColor: 'white',
        padding: 10,
        height: 60,
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row'
    },
    groupTitle: {
        marginLeft: 10,
        marginTop: 10,
        marginBottom: 5,
        fontSize: 12,
        color: 'gray'
    }
})